<template>
    <div
            @click="handleChange"
            v-if="showFullScreenBtn"
            style="display: inline-block"
    >
        <Tooltip :content="value ? $t('exitFullscreen') : $t('fullscreen')" placement="bottom">
            <div class="header-right-icon header-action">
                <Icon :type="value ? 'md-contract' : 'md-expand'" :size="20"></Icon>
            </div>
        </Tooltip>
    </div>
</template>

<script>
    export default {
        name: "fullScreen",
        props: {
            value: {
                type: Boolean,
                default: false,
            },
        },
        computed: {
            showFullScreenBtn() {
                return window.navigator.userAgent.indexOf("MSIE") < 0;
            },
        },
        methods: {
            handleFullscreen() {
                let main = document.body;
                if (this.value) {
                    if (document.exitFullscreen) {
                        document.exitFullscreen();
                    } else if (document.mozCancelFullScreen) {
                        document.mozCancelFullScreen();
                    } else if (document.webkitCancelFullScreen) {
                        document.webkitCancelFullScreen();
                    } else if (document.msExitFullscreen) {
                        document.msExitFullscreen();
                    }
                } else {
                    if (main.requestFullscreen) {
                        main.requestFullscreen();
                    } else if (main.mozRequestFullScreen) {
                        main.mozRequestFullScreen();
                    } else if (main.webkitRequestFullScreen) {
                        main.webkitRequestFullScreen();
                    } else if (main.msRequestFullscreen) {
                        main.msRequestFullscreen();
                    }
                }
            },
            handleChange() {
                this.handleFullscreen();
            },
        },
        created() {
            let isFullscreen =
                document.fullscreenElement ||
                document.mozFullScreenElement ||
                document.webkitFullscreenElement ||
                document.fullScreen ||
                document.mozFullScreen ||
                document.webkitIsFullScreen;
            isFullscreen = !!isFullscreen;
            document.addEventListener("fullscreenchange", () => {
                this.$emit("input", !this.value);
                this.$emit("on-change", !this.value);
            });
            document.addEventListener("mozfullscreenchange", () => {
                this.$emit("input", !this.value);
                this.$emit("on-change", !this.value);
            });
            document.addEventListener("webkitfullscreenchange", () => {
                this.$emit("input", !this.value);
                this.$emit("on-change", !this.value);
            });
            document.addEventListener("msfullscreenchange", () => {
                this.$emit("input", !this.value);
                this.$emit("on-change", !this.value);
            });
            this.$emit("input", isFullscreen);
        },
    };
</script>
